<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box{
				position: relative;
				width: 300px;
				height: 300px
			}
			.circle,.ball{
				position: absolute;
			}
			.circle{
				width: 50px;
				height: 50px;	
				border-radius: 50%;
				left: 0;
				top: 50%;
				background: radial-gradient(#fff,#000);
				transform: rotateX(107deg);
			}
			.ball{
				left: 5px;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background: linear-gradient(235deg,#fa2b6a 25%,#fb2d6c 50%, #fcbbcf 75%,#fcf0f4 100%);
				animation: move 2s ease-in infinite;
			}
			@keyframes move{
				0%{
					top:0px;
				}
				/*50%{
					top:50%
				}*/
				100%{
					top: 50%;
				}
			}
		</style>
	</head>
	<body>
		
		<div class="box">
			<div class="circle">
				
			</div>
			<div class="ball">
				
			</div>
		</div>
	</body>
</html>
